<template>
  <view class="container">
    <!-- 主要内容区域 -->
    <!-- 特产图片轮播 -->
    <view class="product-swiper-section">
      <u-swiper :list="model.imageUrls" :autoplay="true" :circular="true" :interval="3000" height="300" indicator-pos="bottomCenter" bg-color="#f8fafc" mode="number"></u-swiper>
    </view>

    <!-- 基础信息卡片 -->
    <view class="info-card basic-info-card">
      <view class="price-section">
        <text class="current-price">¥{{ model.price }}</text>
        <text class="original-price" v-if="model.originalPrice">¥{{ model.originalPrice }}</text>
      </view>
      <text class="product-name">{{ model.name }}</text>
      <view class="sales-rating">
        <text class="sales-text">保质 {{ model.expirationDays }}天</text>
        <text class="sales-text">已售 {{ model.saleCount }} 件</text>
        <view class="rating-info">
          <u-rate :value="model.rating" :count="5" :size="14" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
          <text class="rating-text">{{ model.rating }}分</text>
        </view>
      </view>
    </view>

    <!-- 优惠/服务卡片 -->
    <view class="info-card service-card">
      <view class="service-item">
        <text class="service-label">优惠</text>
        <text class="service-content">满100减10，新人专享8折</text>
      </view>
      <view class="service-item">
        <text class="service-label">服务</text>
        <text class="service-content">极速发货 · 7天无理由退换 · 运费险</text>
      </view>
      <view class="service-item">
        <text class="service-label">产地</text>
        <text class="service-content">{{ model.origin }}</text>
      </view>
    </view>

    <!-- 详情描述卡片 -->
    <view class="info-card detail-description-card">
      <view class="section-title">
        <u-icon name="file-text" color="#0ea5e9" size="18"></u-icon>
        <text class="title-text">商品详情</text>
      </view>
      <view class="description-content">
        <text class="description-text">{{ model.description }}</text>
      </view>
      <view class="product-specs">
        <view class="spec-item" v-for="(spec, key) in model.specs" :key="key">
          <text class="spec-label">{{ spec.label }}：</text>
          <text class="spec-value">{{ spec.value }}</text>
        </view>
      </view>
    </view>

    <!-- 用户评价卡片 -->
    <view class="info-card review-card" v-if="false">
      <view class="section-title">
        <u-icon name="chat" color="#10b981" size="18"></u-icon>
        <text class="title-text">用户评价 ({{ comments.length }})</text>
        <text class="more-text" @click="goToReviews">查看全部 ></text>
      </view>
      <view class="review-list" v-if="comments.length > 0">
        <view class="review-item" v-for="(review, index) in comments" :key="index">
          <view class="review-header">
            <u-avatar :src="review.avatar" size="30"></u-avatar>
            <text class="reviewer-name">{{ review.name }}</text>
            <u-rate :value="review.rating" :count="5" :size="12" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
          </view>
          <text class="review-content">{{ review.content }}</text>
          <text class="review-time">{{ review.time }}</text>
        </view>
      </view>
      <u-empty v-else mode="data" text="暂无评价" icon-size="80" text-size="24"></u-empty>
    </view>

    <!-- 推荐商品卡片 (可选) -->
    <view class="info-card recommend-card" v-if="false">
      <view class="section-title">
        <u-icon name="grid" color="#f59e0b" size="18"></u-icon>
        <text class="title-text">相关推荐</text>
      </view>
      <scroll-view scroll-x class="recommend-scroll">
        <view class="recommend-list">
          <view class="recommend-item" v-for="item in list" :key="item.id" @click="goToProductDetail(item)">
            <u-image :src="item.image" width="180rpx" height="180rpx" border-radius="16rpx" mode="aspectFill"></u-image>
            <text class="item-name">{{ item.name }}</text>
            <text class="item-price">¥{{ item.price }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="customer-service" @click="contactService">
        <u-icon name="server-fill" color="#64748b" size="24"></u-icon>
        <text class="service-text">客服</text>
      </view>
      <view class="add-to-cart-btn" @click="addToCart(model)">
        <u-icon name="shopping-cart" color="#0ea5e9" size="20"></u-icon>
        <text class="btn-text">加入购物车</text>
      </view>
      <u-button type="primary" shape="circle" :custom-style="buyNowBtnStyle" @click="buyNow(model)">
        立即购买
      </u-button>
    </view>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          id: 1,
          name: '西湖龙井茶 特级明前茶'
        },
        comments: [{
            id: 1,
            name: '用户***01',
            avatar: '/static/images/user-avatar-1.png',
            rating: 5,
            content: '茶叶很新鲜，泡出来香气扑鼻，口感醇厚，是正宗的龙井茶！',
            time: '2023-03-15'
          },
          {
            id: 2,
            name: '用户***02',
            avatar: '/static/images/user-avatar-2.png',
            rating: 4,
            content: '包装精美，送礼很有面子，茶叶品质也不错，值得购买。',
            time: '2023-03-10'
          }
        ],
        list: [],
        // 按钮样式
        buyNowBtnStyle: {
          flex: '1',
          background: 'linear-gradient(135deg, #0ea5e9, #06b6d4)',
          border: 'none',
          height: '80rpx',
          fontSize: '32rpx',
          marginLeft: '24rpx'
        }
      }
    },
    onLoad(options) {
      // 模拟根据ID加载产品数据
      if (options.id) {
        this.model.id = options.id
        this.fetchData()
      }
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/product/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          if (result.imageUrls) {
            let imgs = JSON.parse(result.imageUrls)
            result.imageUrls = imgs
          }
          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })

        this.list = [
          { id: 101, name: '杭州丝绸围巾', image: 'https://picsum.photos/300/200?random=5ct-2.jpg', price: 89.00 },
          { id: 102, name: '桂花糕礼盒', image: 'https://picsum.photos/300/200?rct-3.jpg', price: 58.00 },
          { id: 103, name: '西湖藕粉', image: 'https://picsum.photos/300/200?rcuct-4.jpg', price: 45.00 },
          { id: 104, name: '绍兴黄酒', image: 'https://picsum.photos/300/200?rcoduct-5.jpg', price: 99.00 }
        ]

      },
      shareProduct() {
        console.log('分享商品');
        this.$refs.uToast.show({
          message: '分享功能开发中',
          type: 'info'
        });
        // uni.share({ ... });
      },
      goToReviews() {
        console.log('查看全部评价');
        // uni.navigateTo({ url: `/pages/product/product-reviews?id=${this.model.id}` });
      },
      goToProductDetail(item) {
        console.log('跳转到推荐商品详情:', item.name);
        // uni.navigateTo({ url: `/pages/product/product-detail?id=${item.id}` });
      },
      contactService() {
        console.log('联系客服');
        this.$refs.uToast.show({
          message: '正在联系客服',
          type: 'info'
        });
        // uni.makePhoneCall({ phoneNumber: '10086' });
      },
      addToCart(model) {
        this.$refs.uToast.show({
          message: `暂不支持 ${model.name} 加入购物车`,
          type: 'success'
        });
      },
      buyNow(model) {
        this.$refs.uToast.show({
          message: `暂不支持购买 ${model.name}`,
          type: 'success'
        });
        // uni.navigateTo({ url: `/pages/order/confirm-order?id=${model.id}` });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  .product-swiper-section {
    margin-bottom: 24rpx;
  }

  .info-card {
    background: white;
    border-radius: 24rpx;
    margin: 0px 10upx 20upx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .basic-info-card {
    .price-section {
      display: flex;
      align-items: baseline;
      margin-bottom: 16rpx;

      .current-price {
        font-size: 48rpx;
        font-weight: bold;
        color: #ef4444;
        margin-right: 16rpx;
      }

      .original-price {
        font-size: 28rpx;
        color: #94a3b8;
        text-decoration: line-through;
      }
    }

    .product-name {
      font-size: 36rpx;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.4;
      margin-bottom: 16rpx;
    }

    .sales-rating {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sales-text {
        font-size: 26rpx;
        color: #64748b;
      }

      .rating-info {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .rating-text {
          font-size: 26rpx;
          color: #64748b;
        }
      }
    }
  }

  .service-card {
    .service-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .service-label {
        font-size: 26rpx;
        color: #94a3b8;
        width: 100rpx;
        flex-shrink: 0;
      }

      .service-content {
        flex: 1;
        font-size: 26rpx;
        color: #334155;
        line-height: 1.5;
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;

    .more-text {
      margin-left: auto;
      font-size: 26rpx;
      color: #64748b;
    }
  }

  .detail-description-card {
    .description-content {
      margin-bottom: 32rpx;

      .description-text {
        font-size: 28rpx;
        color: #475569;
        line-height: 1.6;
      }
    }

    .product-specs {
      .spec-item {
        display: flex;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .spec-label {
          font-size: 26rpx;
          color: #94a3b8;
          width: 160rpx;
          flex-shrink: 0;
        }

        .spec-value {
          flex: 1;
          font-size: 26rpx;
          color: #334155;
        }
      }
    }
  }

  .review-card {
    .review-list {
      .review-item {
        background: #f8fafc;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .review-header {
          display: flex;
          align-items: center;
          gap: 16rpx;
          margin-bottom: 16rpx;

          .reviewer-name {
            font-size: 26rpx;
            color: #334155;
            font-weight: 500;
          }
        }

        .review-content {
          font-size: 28rpx;
          color: #475569;
          line-height: 1.5;
          margin-bottom: 16rpx;
        }

        .review-time {
          font-size: 22rpx;
          color: #94a3b8;
        }
      }
    }
  }

  .recommend-card {
    .recommend-scroll {
      white-space: nowrap;

      .recommend-list {
        display: flex;
        gap: 24rpx;

        .recommend-item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          width: 180rpx;
          flex-shrink: 0;

          .item-name {
            font-size: 24rpx;
            color: #334155;
            margin-top: 12rpx;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
          }

          .item-price {
            font-size: 26rpx;
            font-weight: 600;
            color: #ef4444;
            margin-top: 8rpx;
          }
        }
      }
    }
  }

  .bottom-space {
    height: 40rpx; // 底部留白，防止内容被底部操作栏遮挡
  }

  .bottom-action-bar {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f1f5f9;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
    z-index: 100;

    .customer-service {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      margin-right: 32rpx;
      flex-shrink: 0;

      .service-text {
        font-size: 22rpx;
        color: #64748b;
      }
    }

    .add-to-cart-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      border-radius: 40rpx;
      padding: 0 32rpx;
      height: 80rpx;
      flex-shrink: 0;

      .btn-text {
        font-size: 28rpx;
        color: #0ea5e9;
        margin-left: 12rpx;
        font-weight: 500;
      }
    }
  }
</style>